import React, { useState, useCallback, useEffect } from "react";
import { NextPage } from "next";
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Button,
  message,
  Popconfirm,
  Tag
} from "antd";

import { AdminLayout } from "@/layout";
import { CategoryApi } from "@/api/categroy";

interface IProps {
  categorys: ICategory[];
}

const Catetory: NextPage<IProps> = () => {
  // 所有分类
  const [categorys, setCategorys] = useState([]);
  // 当前选择分类
  const [current, setCurrent] = useState<ICategory>();
  // 当前 label
  const [label, setLabel] = useState("");
  // 当前 value
  const [value, setVlaue] = useState("");
  // 得到所有分类
  const getCategorys = useCallback(() => {
    CategoryApi.getAll().then(res => {
      setCategorys(res);
    });
  }, []);
  useEffect(() => {
    getCategorys();
  }, []);
  // 重置状态
  const reset = useCallback(() => {
    setCurrent(null);
    setLabel("");
    setVlaue("");
  }, []);
  // 添加分类
  const addCategory = () => {
    CategoryApi.add({ label, value }).then(res => {
      getCategorys();
      reset();
      message.success("分类标签成功");
    });
  };
  // 删除分类
  const deleteCategory = () => {
    CategoryApi.delete(current.id).then(res => {
      message.success("已删除");
      getCategorys();
      reset();
    });
  };
  // 更新分类
  const updateCategory = () => {
    const { id } = current;
    CategoryApi.update(id, { label, value }).then(res => {
      message.success("更新成功");
    });
  };
  return (
    <AdminLayout>
      <div>
        <Row gutter={16}>
          <Col span={10}>
            <Card title="添加分类">
              <Form.Item>
                <Input
                  size="large"
                  placeholder="输入分类名"
                  onChange={e => setLabel(e.target.value)}
                  value={label}
                />
              </Form.Item>
              <Form.Item>
                <Input
                  size="large"
                  placeholder="输入英文分类值,前台路由用"
                  onChange={e => setVlaue(e.target.value)}
                  value={value}
                />
              </Form.Item>
              {!current ? (
                <Button size="large" type="primary" onClick={addCategory}>
                  {"添加"}
                </Button>
              ) : (
                <React.Fragment>
                  <Button type="primary" onClick={updateCategory}>
                    {"更新"}
                  </Button>
                  <Popconfirm
                    title="确认删除这个分类?"
                    okText="确认"
                    cancelText="取消"
                    onConfirm={deleteCategory}
                  >
                    <Button type="danger" style={{ margin: "0 15px" }}>
                      删除
                    </Button>
                  </Popconfirm>
                  <Button
                    onClick={() => {
                      reset();
                    }}
                  >
                    {"返回添加"}
                  </Button>
                </React.Fragment>
              )}
            </Card>
          </Col>
          <Col span={14}>
            <Card title="所有分类">
              {categorys.map(t => (
                <Tag
                  key={t.id}
                  onClick={() => {
                    setCurrent(t);
                    setLabel(t.label);
                    setVlaue(t.value);
                  }}
                >
                  {t.label}
                </Tag>
              ))}
            </Card>
          </Col>
        </Row>
      </div>
    </AdminLayout>
  );
};

export default Catetory;
